import React, { useState, useEffect, useRef, useCallback } from "react";
import { Tabs, Tooltip } from "antd";
import CommonDrawer from "@/components/CommonDrawer";
import IconFont from "@/components/IconFont";

import AccurateMatchTable from "./AccurateMatchTable";
import SupplierMatchTable from "./SupplierMatchTable";
import IntelligentMatchTable from "./IntelligentMatchTable";
import SkuIntelligentMatchTable from "./SkuIntelligentMatchTable";
import SeniorMatchTable from "./SeniorMatchTable";

export default React.memo(props => {
	const { onCancel, refresh, defaultTab = "精准匹配", data, isSkuType, isOrderGoods, isChangeMatch } = props;
	console.log("isChangeMatch:" + isChangeMatch + ", isSkuType:" + isSkuType + ", tab:" + defaultTab, data, isOrderGoods);

	const [visible, setVisible] = useState(true);
	const onDrawerClose = (ids, needRefresh = true) => {
		setVisible(false);
		setTimeout(() => {
			onCancel && onCancel(ids);
			needRefresh && refresh && refresh();
		}, 100);
	};

	/**
	 * 切换tab
	 */
	const [tabValue, setTabValue] = useState(defaultTab);
	const handleTabsChange = useCallback(activeKey => {
		setTabValue(activeKey);
	});

	const tableProps = {
		onDrawerClose,
		selectedRows: data,
		isSkuType,
		isOrderGoods,
		isChangeMatch
	};

	const items =
		data.length > 1
			? [
					{
						label: `供应商匹配`,
						key: "供应商匹配"
					}
				]
			: isSkuType
				? [
						{
							label: `精准匹配`,
							key: "精准匹配"
						},
						{
							label: `供应商匹配`,
							key: "供应商匹配"
						},
						{
							label: (
								<>
									<span>智能匹配</span>
									<Tooltip
										placement="topLeft"
										title="智能匹配，是通过以图搜款搜索出外观相似的花型图的供应商商品，供用户选择并进行快速匹配，和高级匹配一样只支持含有颜色、尺码或以上的商品"
									>
										<IconFont style={{ marginRight: "0", marginLeft: "4px" }} type="iconwenhao" />
									</Tooltip>
								</>
							),
							key: "单个商品的智能匹配"
						}
					]
				: [
						{
							label: `供应商匹配`,
							key: "供应商匹配"
						},
						{
							label: (
								<>
									<span>高级匹配</span>
									<Tooltip
										placement="topLeft"
										title="高级匹配：根据规格匹配，且只支持有颜色、尺码的商品。目前淘宝、京东、拼多多、抖音和快手5个平台支持高级匹配！"
									>
										<IconFont style={{ marginRight: "0", marginLeft: "4px" }} type="iconwenhao" />
									</Tooltip>
								</>
							),
							key: "高级匹配"
						},
						{
							label: (
								<>
									<span>智能匹配</span>
									<Tooltip
										placement="topLeft"
										title="智能匹配，是通过以图搜款搜索出外观相似的花型图的供应商商品，供用户选择并进行快速匹配，和高级匹配一样只支持含有颜色、尺码或以上的商品"
									>
										<IconFont style={{ marginRight: "0", marginLeft: "4px" }} type="iconwenhao" />
									</Tooltip>
								</>
							),
							key: "智能匹配"
						}
					];

	return (
		<CommonDrawer
			className="views-table-drawer"
			title="商品匹配"
			open={visible}
			width="80%"
			okText="保存"
			onClose={() => {
				onDrawerClose(null, false);
			}}
			zIndex={910}
		>
			<Tabs destroyInactiveTabPane={false} defaultActiveKey={defaultTab} onChange={handleTabsChange} items={items} />
			<div style={{ height: "calc(100% - 50px)" }}>
				{tabValue == "精准匹配" && <AccurateMatchTable {...tableProps} />}
				{tabValue == "供应商匹配" && <SupplierMatchTable {...tableProps} />}
				{tabValue == "智能匹配" && <IntelligentMatchTable {...tableProps} />}
				{tabValue == "单个商品的智能匹配" && <SkuIntelligentMatchTable {...tableProps} />}
				{tabValue == "高级匹配" && <SeniorMatchTable {...tableProps} />}
			</div>
		</CommonDrawer>
	);
});
